<template>
  <div class="card-box">

    <v-step :step=2></v-step>

    <div class="line-box"></div>

    <div class="wrap-box">
      <div class="img-box"><img src="./scan.png" class="logo" onclick="return false"/></div>
      <div class="title">点击扫描银行卡</div>
      <input type="file" accept="image/*" capture="camera" class="file" @change="changePhoto($event)"/>
    </div>

    <router-link to="/cardWrite">
      <div class="wrap-box write">
        <div class="img-box"><img src="./write.png" class="logo"/></div>
        <div class="title">忘带银行卡，点击手动输入</div>
      </div>
    </router-link>

    <div class="photo-warp" v-show="photoShow">
      <div class="photo-box">
        <img :src="photo" class="photo" onclick="return false"/>
      </div>
      <div class="discern">正在识别中</div>
    </div>

    <div class="btn-box">
      <button type="button" class="btn" @click="backStep">上一步</button>
    </div>

    <v-dialog v-model="modalVal" :content="content" type="default"></v-dialog>

  </div>
</template>

<script>
  import flowStep from "../../components/flow"
  import {getBase64, getNowFormatDate} from "../../config/util"
  import {baseUrl} from "../../config/env"
  import dialog from "../../components/dialog"

  export default {
    data() {
      return {
        photo: "",
        photoShow: false,
        assessToken: "",
        modalVal: false,
        content: "",
        userSign: "",
        virValue: "",
      }
    },
    created() {
      this.assessToken = sessionStorage.getItem("access_token");
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("openid"));
    },
    methods: {
      changePhoto(e) {//显示图片
        if (e.target.files.length > 0) {
          getBase64(e.target, (url) => {
            this.photo = 'data:image/png;base64,' + url;
            this.photoShow = true;
            setTimeout(() => {
              this.uploadPhoto();
            }, 50);
          })
        }
      },
      uploadPhoto() {//百度API识别
        let image = this.photo.split(",")[1];
        this.$vux.loading.show({
          text: '加载中',
        });
        this.virValue = getNowFormatDate(this.userSign);
        let data = {"image": image, "accessToken": this.assessToken, "virValue": this.$encruption(this.virValue)};
        this.axios.post(baseUrl + "/userbank/scan?sgin=" + this.userSign + "&type=2", data).then((res) => {
          let resultObj = res.data;
          this.photoShow = false;
          this.photo = "";
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data.result.bank_card_type != 1) {
              this.$vux.toast.text("工资卡必须为借记卡！", "middle");
            } else {
              let bankName = resultObj.data.result.bank_name;
              if (this.checkPlatformCard(bankName)) {
                this.content = "本平台工资卡绑定不支持该银行的银行卡！";
                this.modalVal = true;
              } else {
                let cardNum = resultObj.data.result.bank_card_number;
                sessionStorage.setItem("card_no", this.$encruption(cardNum.replace(/\s*/g, "")));
                sessionStorage.setItem("bank_name", bankName);
                this.$router.push("/cardWrite");
              }
            }
          } else if (resultObj.code == 20055 || resultObj.code == 10000 || resultObj.code == 10002 || resultObj.code == 10004) {
            this.$vux.toast.text(resultObj.msg, "middle");
          } else {
            this.$vux.toast.text(resultObj.data.error_msg, "middle");
          }
        }).catch(() => {
          this.photoShow = false;
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      backStep() {
        this.$router.go(-1);
      },
      checkPlatformCard(bankName) {
        return bankName.indexOf("招商") == -1 && bankName.indexOf("建设") == -1
          && bankName.indexOf("兴业") == -1 && bankName.indexOf("农业") == -1
          && bankName.indexOf("工商") == -1 && bankName.indexOf("中国银行") == -1
          && bankName.indexOf("交通") == -1 && bankName.indexOf("邮储") == -1
          && bankName.indexOf("光大") == -1 && bankName.indexOf("广发") == -1
          && bankName.indexOf("平安") == -1 && bankName.indexOf("华夏") == -1 && bankName.indexOf("浙商") == -1;
      }
    },
    components: {
      "v-step": flowStep,
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  .card-box
    width: 100%
    height: 100%
    overflow: hidden
    .line-box
      margin-top: 0.493rem
      height: 0.28rem
      background: rgba(242, 242, 242, 1)
    .wrap-box
      position: relative
      margin: 0 auto
      margin-top: 0.8rem
      width: 70.4%
      height: 3.613rem
      border: 0.027rem solid rgba(230, 230, 230, 1)
      border-radius: 0.227rem
      .img-box
        display: flex
        justify-content: center
        .logo
          margin-top: 0.667rem
          margin-bottom: 0.24rem
          width: 1.627rem
          height: 1.627rem
      .title
        text-align: center
        font-size: 0.427rem
        color: rgba(60, 175, 255, 1)
      .file
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0.226666rem;
        background: #EEE;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        z-index: 98;
    .write
      margin-top: 0.493rem
    .photo-warp
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
      .photo-box
        width: 9.08rem
        height: 5.92rem
        background: rgba(255, 255, 255, 1)
        border-radius: 0.107rem
        .photo
          width: 100%
          height: 100%
      .discern
        position: fixed
        bottom: 0.48rem
        text-align: center
        margin: 0 auto
        width: 92.53%
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(60, 175, 255, 1)
        border-radius: 0.107rem
        font-size: 0.48rem
        color: rgba(255, 255, 255, 1)
    .btn-box
      position: fixed
      bottom: 0.48rem
      width: 100%
      height: 1.333rem
      text-align: center
      .btn
        width: 92.53%
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(60, 175, 255, 1)
        border-radius: 0.107rem
        font-size: 0.48rem
        color: rgba(255, 255, 255, 1)
</style>



